<template>
    <div class="buyList flexv">
        <!-- 头部 -->
        <!-- 轮播图 -->
		<pubHead title="限时秒杀"></pubHead>
        <div class="swiper_box flex" v-if="banners">
        	<van-swipe class="swiper" :show-indicators="true" indicator-color="#FEA382" :autoplay="3000" :loop="true">
        		<van-swipe-item class="flex">
        			<img :src="banners" alt="">
        		</van-swipe-item>
        	</van-swipe>
        </div>
		<div class="my-qiang flex jus-b ali-c">
			<div class="flex my-qiang-l ali-c">
				<img class="img" src="../../assets/biao.png" />
				<span>抢购进行中</span>
			</div>
			<div class="cut-down ali-c">
				<span>距结束</span>
				<span class="time">{{times.d}}</span>
				<span>天</span>
				<span class="time">{{times.h}}</span>
				<span>:</span>
				<span class="time">{{times.m}}</span>
				<span>:</span>
				<span class="time">{{times.s}}</span>
			</div>
		</div>
		<!-- 热卖商品 -->
		<van-list v-model="loading" :finished-text="finishedText" :finished="finished" @load="getHots">
			<!-- 拼团商品列表 -->
			<div class="group-lists flexv">
				<div class="group-list flex" v-for="(item,index) in hots" :key="index" @click="toPintuan(item)">
					<div class="group-img flex">
						<img :src="item.image" alt="">
					</div>
					<div class="flex1 goods-infos flexv jus-b">
						<p class="twoline goods_title">{{item.goods_name}}</p>
						<div class="goods-fix jus-b">
							<p class="price ali-b">￥{{item.goods_price}}<span>￥{{item.line_price}}</span></p>
						</div>
						<div class="goods-fix jus-b">
							<div>
								<p style="color:#b2b2b2;font-size: 0.22rem;">已售{{item.sales}}件</p>
								<van-progress pivot-text=""  color="#50AD22" :percentage="(item.percentage*100)" />
							</div>
							<div class="btn tc white">马上抢</div>
						</div>
					</div>
				</div>
			</div>
		</van-list>
    </div>
</template>
<script>
	import Vue from 'vue';
	import {
		Toast,
		List,
		Swipe,
		SwipeItem,
		Progress
	} from 'vant';
	import {
		getLimitDiscountGoods
	} from '@/request/api';
	import pubHead from '@/components/head';
	Vue.use(Toast,Swipe, SwipeItem, List,Progress)
export default {
    data(){
        return{
			page: 0,
			pagesize: 50,
			hots: [], // 热卖
			banners:[],
			finishedText: '嘉瑞科技提供技术支持',
			finished: false,
			loading: false,
			timmer:'',
			times:'',
			nowTime:''
        }
    },
    components: {
		 pubHead,
		"van-list": List,
		"van-swipe": Swipe,
		"van-swipe-item": SwipeItem,
		"van-progress":Progress
    },
    created(){
    },
	beforeRouteLeave(to, from, next) {
		clearInterval(this.timmer);
		next()
	},
    methods: {
		// 获取当季热卖商品
		getHots() {
			this.$loading()
			getLimitDiscountGoods({
				page: ++this.page,
				pagesize: this.pagesize
			}).then(res => {
				Toast.clear();
				if (res.code == 1) {
					// this.finished = Number(res.data.good_item.length) >= 10 ? false : true;
					this.finished = true
					if (res.data.list.length > 0) {
						this.hots = [...this.hots, ...res.data.list];
					}
					this.banners = res.data.seckill_ad
					this.nowTime = res.time
					this.cutDown(this.nowTime,this.hots[0].end_time)
				} else {
					if (res.msg == '请登录后操作') {
						this.$tip('您的登录已失效,即将重新登录!');
						setTimeout(() => {
							localStorage.clear();
							// sessionStorage.clear();
							window.location.href = 'http://mbgo.0791jr.com';
						}, 1200)
					}
				}
			})
		},
		seckill_1(now,rest){
		    // let days = formatNumber(parseInt(rest / 60 / 60 / 24)),
		    //   hours = formatNumber(parseInt(rest / 60 / 60 % 24)),
		    //   minutes = formatNumber(parseInt(rest / 60 % 60)),
		    //   seconds = formatNumber(parseInt(rest % 60));
			let nowTime = new Date(now*1000);
			let endTime = new Date(rest*1000);
			let t = endTime.getTime() - nowTime.getTime();
			let days = Math.floor(t/1000/60/60/24);
			let hours = Math.floor(t/1000/60/60%24);
			let minutes = Math.floor(t/1000/60%60);
			let seconds = Math.floor(t/1000%60);
			if(days < 10){
				days = '0' + days;
			}
			if(hours < 10){
				hours = '0' + hours;
			}
			if(minutes < 10){
				minutes = '0' + minutes;
			}
			if(seconds < 10){
				seconds = '0' + seconds;
			}
		    return { d: days, h: hours, m: minutes, s: seconds }
		  },
		cutDown(now,time) {
				this.timmer = setInterval(() => {
					if (time >= 0) {
						this.times = this.seckill_1(now,time);
						time=time-1;
					} else {
						clearInterval(this.timmer);
					}
				}, 1000)
		},
		toGoodDetail(item) {
			this.$router.push('/goodsDetail?id=' + item.goods_id)
		},
		toGoods(item){
		},
		toPintuan(item){
			// 实物商品
			if (item.item_type == 0) {
				// 是否活动商品
				if(item.limit_discount_id){
					// 秒杀
					this.$router.push('/collage?limit_discount_id=' + item.limit_discount_id + '&goods_id='+item.goods_id)
					return
				}else{
					this.$router.push('/goodsDetail?id=' + item.goods_id)
					return
				}
			}
			// 虚拟商品
			if(item.item_type != 0){
				// 是否活动商品
				if(item.limit_discount_id){
					// 秒杀
					this.$router.push('/detail?id=' + item.goods_id + '&type=' + item.item_type + '&limit_discount_id='+ item.limit_discount_id)
					return
				}else{
					this.$router.push('/detail?id=' + item.goods_id + '&type=' + item.item_type)
					return
				}
			}
			// if(item.limit_discount_id){
			// 	this.$router.push('/collage?limit_discount_id=' + item.limit_discount_id+'&goods_id='+item.goods_id)
			// }else{
			// 	this.$router.push('/collage?id=' + item.id+'&goods_id='+item.goods_id)
			// }
		},
		
    },
	
	
}
</script>
<style lang="less" scoped>
.buyList{
    min-height: 100vh;
    background: #f5f5f5;
	//抢购进行时
	.my-qiang{
		padding:0.2rem 0.3rem 0 0.3rem;
		.my-qiang-l{
			color: #EE1C1A;
			.img{
				width: 0.3rem;
				height: 0.3rem;
				margin-right: 0.1rem;
			}
		}
		.cut-down {
			margin-left: 0.24rem;
			font-size: 0.24rem;
			line-height: 120%;
			color: #EE1C1A;
		
			.time {
				margin: 0 0.06rem;
				padding: 0.04rem;
				border-radius: 0.04rem;
				font-size: 0.22rem;
				color: #fff;
				background-color:  #EE1C1A;
			}
		}
	}
	// 轮播图
	.swiper_box {
		height: 3rem;
		padding-top: 0.1rem;
		background-color: #fff;
	
		.swiper {
			width: calc(100% - 0.56rem);
			height: 100%;
			margin: 0 auto;
			border-radius: 0.1rem;
			background-color: #fff;
	
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	// 热卖商品
	.group-lists {
		margin-top: 0.1rem;
		background-color: #fff;
	
		.group-list {
			margin-top: 0.2rem;
			padding: 0.2rem;
			border-radius: 0.1rem;
			border: 1px solid #f5f5f5;
	
			.group-img {
				width: 2.1rem;
				height: 2.1rem;
				border-radius: 0.1rem;
				overflow: hidden;
	
				img {
					margin: auto;
				}
			}
	
			.goods-infos {
				margin-left: 0.2rem;
	
				.title {
					font-size: 0.26rem;
					line-height: 150%;
					color: #333;
				}
	
				.group-info {
					height: 0.36rem;
					margin-right: auto;
					border-radius: 0.18rem;
					border: 0.01rem solid #50AD22;
					font-size: 0.2rem;
					line-height: 0.34rem;
					overflow: hidden;
	
					.type {
						padding: 0 0.16rem;
						background-color: #50AD22;
					}
	
					.sales {
						padding: 0 0.16rem;
						color: #999;
					}
				}
	
				.goods-fix {
					font-size: 0.28rem;
					line-height: 120%;
	
					.price {
						margin-top: auto;
						color: #EE1C1A;
	
						span {
							margin-left: 0.12rem;
							font-size: 0.22rem;
							color: #999;
							text-decoration: line-through;
						}
					}
	
					.btn {
						width: 1.2rem;
						height: 0.5rem;
						border-radius: 0.25rem;
						background-color: #50AD22;
						line-height: 0.5rem;
					}
				}
			}
		}
	}
}
</style>